<!DOCTYPE html>
<html>
<!--body onLoad = "draw()"-->
<body>
<img src="./i/eg_bulboff.gif" id="lamp" style="display:none"/>

<button onclick="drawline()">Repeat</button> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">
function drawline(){
	var dx = 50;
	var dy = 50;
	var drection = 'repeat';
	DrawSqure(dx,dy);
	dx=dx+150;
	DrawSqure(dx,dy);
	document.f.dx.value = dx;
	document.f.dy.value = dy;
}
function draw(dx,dy)
{
//var drection = 'no-repeat'
var dx = 50;
var dy = 50;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(dx,dy,100,100); 
var img=document.getElementById("lamp")
//var pat=ctx.createPattern(img,'no-repeat');
ctx.rect(dx,dy,100,100);
ctx.fillStyle=ctx.createPattern(img,'repeat');
ctx.fill();
}
</script>

</body>
</html>
